<script setup>
import { onMounted, ref } from 'vue'
import { getBannersApi } from '@/api/home'
import { listWithVehicleApi } from '@/api/campusOrShop'
import { useRoute } from 'vue-router'
const route = useRoute()

const bannerList = ref([])
const setBannerList = async () => {
  const res = await getBannersApi('', route.params.type)
  bannerList.value = res.data
}

const categoryData = ref([])
const setCategoryData = async () => {
  const res = await listWithVehicleApi(route.params.type)
  categoryData.value = res.data
}

onMounted(() => {
  setBannerList()
  setCategoryData()
})
</script>
<template>
  <div class="container m-top-20">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          route.params.type == 1 ? '全部校园' : '全部店铺'
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 轮播图 -->
    <div class="home-banner">
      <el-carousel type="card" :height="'240px'">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <img :src="item.picture" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-if="categoryData">
      <div class="campus-area" v-for="categ in categoryData" :key="categ.id">
        <div class="left">
          <DescCard
            :count="categ.count"
            :todayNew="categ.todayCount"
            :campusName="categ.name"
            :picture="categ.picture"
            :addr="categ.addr"
          ></DescCard>
          <div class="enter">
            <a
              class="cpampus-btn"
              @click.prevent="$router.push(`/list?campusOrShopId=${categ.id}`)"
            >
              点击进入</a
            >
          </div>
        </div>
        <div class="right">
          <el-carousel height="240px" indicator-position="none" arrow="always">
            <el-carousel-item>
              <div class="carList-area">
                <ul>
                  <li v-for="i in categ.publishList.slice(0, 4)" :key="i">
                    <car-item-publish size="mini" :car="i" />
                  </li>
                </ul>
              </div>
            </el-carousel-item>
            <el-carousel-item v-if="categ.publishList.slice(4, 8).length > 0">
              <div class="carList-area">
                <ul>
                  <li v-for="i in categ.publishList.slice(4, 8)" :key="i">
                    <car-item-publish size="mini" :car="i" />
                  </li>
                </ul>
              </div>
            </el-carousel-item>
          </el-carousel>
          <h3>最近上架</h3>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-banner {
  margin-bottom: 20px;
  img {
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
  }
}
.campus-area {
  display: flex;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 5px 0;

  h3 {
    font-size: 24px;
    line-height: 24px;
    padding-bottom: 20px;
    text-align: center;
    font-weight: normal;
    color: #666;
  }
  .left {
    padding: 20px 0 0 10px;
    .enter {
      text-align: center;
      padding-bottom: 10px;
    }
    .cpampus-btn {
      display: inline-block;
      width: 150px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      margin-left: 80px;

      background-color: #55e6c1;
      border-radius: 5px;
      color: #fff;

      &:hover {
        background-color: #7ae6cb;
        cursor: pointer;
      }
    }
  }

  .right {
    flex: 1;
    border: 1px solid #25ccf7;
    box-shadow: 0px 0px 5px 5px #9aecdb;
    border-radius: 10px;
    margin: 5px;
    .carList-area {
      ul {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 20px;
      }
    }
  }
}
</style>
